<!-- 页面 -->
<template>
  <div class="home">
    <div class="ka">
      <div class="ka1">
      </div>
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item el-icon-user-solid prop="username">
            <el-input class="inp" v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item el-icon-user-solid prop="password">
            <el-input class="inp" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add()">登录</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="tu">
      <div class="tp">
        <img src="../assets/logo.png" alt="">
      </div>
    </div>


  </div>
</template>
<!-- vue -->
<script>
export default {
  data() {
    return {
      // 声明的属性

      ruleForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
        ],
      }
    }
  },
  //生命周期函数
  mounted() {
  },
  // 调用方法
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    add() {
      this.$axios.post('http://shiyansong.cn:8888/api/private/v1/login',{
        username:this.ruleForm.username,
        password:this.ruleForm.password
      }).then(res=>{
        let data = res.data
        console.log(data);
        localStorage.setItem('token',data.data.token);//保存token令牌
        if(data.meta.status==200){
          this.$message({
          message: '登录成功',
          type: 'success'
        });
        this.$router.push('/cai')
        }else{
          this.$message({
          message: '登录失败,账号或密码错误',
          type: 'warning'
        });
        }
      })
    }
  },
  // 监听器
  watch: {
  },
  // 计算属性
  computed: {
  },
  // 过滤器
  filters: {
  },
  // 自定义指令
  directives: {
  }
}
</script>
<!-- css样式 -->
<style>
.home {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #2c4b6b;
  position: relative;
}

.home .ka {
  width: 400px;
  height: 250px;
  background: white;
  margin-top: 250px;
  position: absolute;
  left: 40%;
}

.home .tu {
  width: 110px;
  height: 110px;
  background: white;
  border-radius: 50%;
  border: 1px solid #BFBFBF;
  position: absolute;
  top: 200px;
  left: 48%;
}

.home .tu .tp img {
  width: 100px;
  height: 100px;
  background: #ccc;
  border-radius: 50%;
  margin: 5px 5px;
}

.inp{
  width: 300px !important;
  margin-left: -50px !important;
}

.ka1 {
  height: 100px;
}
</style>